<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人中心 - 查聊</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 自定义Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#4F46E5', // 主色调：紫色
            secondary: '#10B981', // 辅助色：绿色
            accent: '#F59E0B', // 强调色：橙色
            light: '#F3F4F6', // 浅色背景
            dark: '#1F2937', // 深色文本
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
    }
  </style>
  
  <style>
    /* 基础样式 */
    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
    }
    
    /* 平滑滚动 */
    html {
      scroll-behavior: smooth;
    }
  </style>
</head>
<body class="bg-gray-50 text-gray-800">
  <!-- PC端导航栏 -->
  <header class="hidden md:block fixed top-0 left-0 right-0 bg-white shadow-sm z-30">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <!-- Logo -->
      <a href="index.html" class="flex items-center space-x-2">
        <span class="text-primary text-2xl"><i class="fa fa-comments-o"></i></span>
        <span class="text-xl font-bold text-primary">查聊</span>
      </a>
      
      <!-- 搜索框 -->
      <div class="relative flex-1 max-w-xl mx-8">
        <input type="text" placeholder="搜索帖子、话题或用户..." 
               class="w-full pl-10 pr-4 py-2 rounded-full bg-light border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
        <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
          <i class="fa fa-search"></i>
        </span>
      </div>
      
      <!-- 导航链接 -->
      <nav class="flex items-center space-x-6">
        <a href="index.html" class="text-gray-600 hover:text-primary transition-colors">首页</a>
        <a href="#" class="text-gray-600 hover:text-primary transition-colors">发现</a>
        <a href="new-post.html" class="px-4 py-2 bg-primary text-white rounded-full hover:bg-primary/90 transition-colors flex items-center space-x-1">
          <i class="fa fa-pencil"></i>
          <span>发帖</span>
        </a>
        <a href="profile.html" class="relative">
          <img src="https://picsum.photos/seed/user1/40/40" alt="用户头像" class="w-10 h-10 rounded-full object-cover border-2 border-primary shadow-sm">
        </a>
      </nav>
    </div>
  </header>

  <!-- 移动端顶部导航 -->
  <header class="md:hidden fixed top-0 left-0 right-0 bg-white shadow-sm z-30">
    <div class="flex items-center justify-between p-4">
      <a href="index.html" class="text-gray-700">
        <i class="fa fa-arrow-left text-lg"></i>
      </a>
      <span class="font-medium text-gray-900">个人中心</span>
      <button class="text-gray-700">
        <i class="fa fa-cog text-lg"></i>
      </button>
    </div>
  </header>

  <!-- 主要内容区域 -->
  <main class="container mx-auto px-4 pt-24 pb-20 md:pt-28">
    <div class="flex flex-col lg:flex-row gap-6">
      <!-- 左侧边栏 (PC端) -->
      <aside class="hidden lg:block w-64 shrink-0">
        <div class="bg-white rounded-xl shadow-sm p-5 sticky top-24">
          <!-- 用户信息 -->
          <div class="flex items-center space-x-3 mb-6">
            <img src="https://picsum.photos/seed/user1/60/60" alt="用户头像" class="w-12 h-12 rounded-full object-cover border-2 border-primary/20">
            <div>
              <h3 class="font-semibold text-gray-900">张三</h3>
              <p class="text-sm text-gray-500">@zhangsan</p>
            </div>
          </div>
          
          <!-- 导航菜单 -->
          <nav class="space-y-1">
            <a href="index.html" class="flex items-center space-x-3 p-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
              <i class="fa fa-home w-5 text-center"></i>
              <span>首页</span>
            </a>
            <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
              <i class="fa fa-compass w-5 text-center"></i>
              <span>发现</span>
            </a>
            <a href="favorites.html" class="flex items-center space-x-3 p-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
              <i class="fa fa-star-o w-5 text-center"></i>
              <span>我的收藏</span>
              <span class="ml-auto bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">5</span>
            </a>
            <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
              <i class="fa fa-bell-o w-5 text-center"></i>
              <span>通知</span>
              <span class="ml-auto bg-red-100 text-red-600 text-xs px-2 py-1 rounded-full">3</span>
            </a>
            <a href="profile.html" class="flex items-center space-x-3 p-3 rounded-lg bg-primary/10 text-primary font-medium">
              <i class="fa fa-user-o w-5 text-center"></i>
              <span>个人中心</span>
            </a>
          </nav>
          
          <!-- 分割线 -->
          <div class="my-5 border-t border-gray-100"></div>
          
          <!-- 热门话题 -->
          <h4 class="font-semibold text-gray-700 mb-3">热门话题</h4>
          <div class="space-y-3">
            <a href="#" class="block text-sm text-gray-600 hover:text-primary transition-colors">
              #前端开发
            </a>
            <a href="#" class="block text-sm text-gray-600 hover:text-primary transition-colors">
              #人工智能
            </a>
            <a href="#" class="block text-sm text-gray-600 hover:text-primary transition-colors">
              #生活方式
            </a>
            <a href="#" class="block text-sm text-gray-600 hover:text-primary transition-colors">
              #职场经验
            </a>
          </div>
        </div>
      </aside>

      <!-- 中间内容区 -->
      <div class="flex-1">
        <!-- 用户个人资料头部 -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6">
          <!-- 封面图 -->
          <div class="h-40 bg-gradient-to-r from-primary/80 to-purple-600/80 relative">
            <img src="https://picsum.photos/seed/cover1/1200/400" alt="封面图" class="w-full h-full object-cover mix-blend-overlay">
            <!-- 编辑封面按钮 -->
            <button class="absolute bottom-4 right-4 px-3 py-1.5 bg-black/40 text-white text-sm rounded-full backdrop-blur-sm hover:bg-black/50 transition-colors">
              <i class="fa fa-camera mr-1"></i> 更换封面
            </button>
          </div>
          
          <!-- 用户基本信息 -->
          <div class="relative px-5 pb-5">
            <!-- 头像 -->
            <div class="absolute -top-16 left-5">
              <div class="relative">
                <img src="https://picsum.photos/seed/user1/120/120" alt="用户头像" class="w-32 h-32 rounded-full object-cover border-4 border-white">
                <!-- 编辑头像按钮 -->
                <button class="absolute bottom-2 right-2 w-8 h-8 bg-white rounded-full flex items-center justify-center shadow-md">
                  <i class="fa fa-camera text-primary"></i>
                </button>
              </div>
            </div>
            
            <!-- 用户信息 -->
            <div class="ml-40 pt-6">
              <div class="flex flex-wrap items-center justify-between gap-4">
                <div>
                  <h1 class="text-2xl font-bold text-gray-900">张三</h1>
                  <p class="text-gray-500">@zhangsan</p>
                </div>
                <div class="flex space-x-3">
                  <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors flex items-center space-x-1">
                    <i class="fa fa-cog"></i>
                    <span>编辑资料</span>
                  </button>
                </div>
              </div>
              
              <!-- 个人简介 -->
              <p class="mt-3 text-gray-700">
                前端开发工程师 | 热爱技术分享 | 喜欢摄影和旅行 | 致力于打造优秀的用户体验
              </p>
              
              <!-- 社交媒体链接 -->
              <div class="mt-3 flex space-x-4">
                <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                  <i class="fa fa-github text-xl"></i>
                </a>
                <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                  <i class="fa fa-twitter text-xl"></i>
                </a>
                <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                  <i class="fa fa-linkedin text-xl"></i>
                </a>
              </div>
            </div>
          </div>
          
          <!-- 统计数据 -->
          <div class="grid grid-cols-3 border-t border-gray-100">
            <a href="#" class="py-4 text-center hover:bg-gray-50 transition-colors">
              <p class="font-bold text-gray-900 text-xl">12</p>
              <p class="text-sm text-gray-500">帖子</p>
            </a>
            <a href="#" class="py-4 text-center border-x border-gray-100 hover:bg-gray-50 transition-colors">
              <p class="font-bold text-gray-900 text-xl">256</p>
              <p class="text-sm text-gray-500">粉丝</p>
            </a>
            <a href="#" class="py-4 text-center hover:bg-gray-50 transition-colors">
              <p class="font-bold text-gray-900 text-xl">56</p>
              <p class="text-sm text-gray-500">关注</p>
            </a>
          </div>
        </div>

        <!-- 内容选项卡 -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6">
          <div class="flex border-b border-gray-100">
            <button class="flex-1 py-4 text-center font-medium text-primary border-b-2 border-primary">我的帖子</button>
            <button class="flex-1 py-4 text-center font-medium text-gray-500 hover:text-gray-700 transition-colors">我的收藏</button>
            <button class="flex-1 py-4 text-center font-medium text-gray-500 hover:text-gray-700 transition-colors">我的点赞</button>
          </div>
          
          <!-- 我的帖子列表 -->
          <div class="divide-y divide-gray-100">
            <!-- 帖子1 -->
            <div class="p-5 hover:bg-gray-50 transition-colors">
              <h2 class="text-lg font-semibold mb-2 text-gray-900 hover:text-primary transition-colors">
                <a href="post-detail.html">React Hooks 性能优化实战指南</a>
              </h2>
              <p class="text-gray-600 mb-3 line-clamp-2">
                在使用React Hooks开发应用时，性能优化是一个重要的考虑因素。本文分享了几个实用的性能优化技巧，包括useMemo、useCallback的正确使用，以及如何避免不必要的重渲染。
              </p>
              
              <!-- 互动数据 -->
              <div class="flex items-center justify-between text-gray-500 text-sm">
                <span>3天前 · 技术讨论</span>
                <div class="flex items-center space-x-4">
                  <span><i class="fa fa-eye mr-1"></i> 342</span>
                  <span><i class="fa fa-heart-o mr-1"></i> 45</span>
                  <span><i class="fa fa-comment-o mr-1"></i> 12</span>
                </div>
              </div>
            </div>
            
            <!-- 帖子2 -->
            <div class="p-5 hover:bg-gray-50 transition-colors">
              <h2 class="text-lg font-semibold mb-2 text-gray-900 hover:text-primary transition-colors">
                <a href="post-detail.html">CSS Grid布局完全指南</a>
              </h2>
              <p class="text-gray-600 mb-3 line-clamp-2">
                CSS Grid是一个强大的二维布局系统，可以同时处理行和列。本文详细介绍了Grid布局的核心概念和常用属性，并通过实际案例展示了如何使用Grid创建复杂的网页布局。
              </p>
              
              <!-- 帖子图片 -->
              <div class="rounded-lg overflow-hidden mb-3">
                <img src="https://picsum.photos/seed/cssgrid/800/400" alt="CSS Grid示例" class="w-full h-auto object-cover">
              </div>
              
              <!-- 互动数据 -->
              <div class="flex items-center justify-between text-gray-500 text-sm">
                <span>1周前 · 技术讨论</span>
                <div class="flex items-center space-x-4">
                  <span><i class="fa fa-eye mr-1"></i> 521</span>
                  <span><i class="fa fa-heart-o mr-1"></i> 78</span>
                  <span><i class="fa fa-comment-o mr-1"></i> 24</span>
                </div>
              </div>
            </div>
            
            <!-- 帖子3 -->
            <div class="p-5 hover:bg-gray-50 transition-colors">
              <h2 class="text-lg font-semibold mb-2 text-gray-900 hover:text-primary transition-colors">
                <a href="post-detail.html">【资源分享】2023年前端开发必备工具集</a>
              </h2>
              <p class="text-gray-600 mb-3 line-clamp-2">
                整理了一套2023年前端开发必备的工具集，包括代码编辑器插件、性能优化工具、测试框架、UI组件库等，帮助你提升开发效率和代码质量。
              </p>
              
              <!-- 互动数据 -->
              <div class="flex items-center justify-between text-gray-500 text-sm">
                <span>2周前 · 资源分享</span>
                <div class="flex items-center space-x-4">
                  <span><i class="fa fa-eye mr-1"></i> 896</span>
                  <span><i class="fa fa-heart-o mr-1"></i> 156</span>
                  <span><i class="fa fa-comment-o mr-1"></i> 42</span>
                </div>
              </div>
            </div>
            
            <!-- 帖子4 -->
            <div class="p-5 hover:bg-gray-50 transition-colors">
              <h2 class="text-lg font-semibold mb-2 text-gray-900 hover:text-primary transition-colors">
                <a href="post-detail.html">Web性能优化：从理论到实践</a>
              </h2>
              <p class="text-gray-600 mb-3 line-clamp-2">
                Web性能优化是提升用户体验的关键。本文从理论出发，结合实际项目经验，分享了一系列性能优化策略，包括资源加载优化、渲染性能优化、网络优化等方面。
              </p>
              
              <!-- 帖子图片 -->
              <div class="grid grid-cols-2 gap-2 rounded-lg overflow-hidden mb-3">
                <img src="https://picsum.photos/seed/performance1/400/300" alt="性能优化示例1" class="w-full h-36 object-cover">
                <img src="https://picsum.photos/seed/performance2/400/300" alt="性能优化示例2" class="w-full h-36 object-cover">
              </div>
              
              <!-- 互动数据 -->
              <div class="flex items-center justify-between text-gray-500 text-sm">
                <span>1个月前 · 技术讨论</span>
                <div class="flex items-center space-x-4">
                  <span><i class="fa fa-eye mr-1"></i> 1.2k</span>
                  <span><i class="fa fa-heart-o mr-1"></i> 215</span>
                  <span><i class="fa fa-comment-o mr-1"></i> 67</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 加载更多 -->
          <div class="text-center py-5">
            <button class="px-6 py-2 border border-gray-200 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
              加载更多
            </button>
          </div>
        </div>
      </div>

      <!-- 右侧边栏 (PC端) -->
      <aside class="hidden lg:block w-72 shrink-0">
        <!-- 用户基本信息卡片 -->
        <div class="bg-white rounded-xl shadow-sm p-5 mb-6">
          <h3 class="font-semibold text-gray-900 mb-4">个人信息</h3>
          <div class="space-y-3">
            <div class="flex items-start space-x-3">
              <i class="fa fa-map-marker text-gray-400 mt-1 shrink-0"></i>
              <p class="text-gray-700">北京市</p>
            </div>
            <div class="flex items-start space-x-3">
              <i class="fa fa-briefcase text-gray-400 mt-1 shrink-0"></i>
              <p class="text-gray-700">前端开发工程师 @ 科技公司</p>
            </div>
            <div class="flex items-start space-x-3">
              <i class="fa fa-graduation-cap text-gray-400 mt-1 shrink-0"></i>
              <p class="text-gray-700">北京大学 计算机科学与技术</p>
            </div>
            <div class="flex items-start space-x-3">
              <i class="fa fa-calendar text-gray-400 mt-1 shrink-0"></i>
              <p class="text-gray-700">2020年3月加入</p>
            </div>
          </div>
        </div>
        
        <!-- 活跃时间 -->
        <div class="bg-white rounded-xl shadow-sm p-5 mb-6">
          <h3 class="font-semibold text-gray-900 mb-4">活跃时间</h3>
          <div class="space-y-2">
            <div>
              <div class="flex justify-between mb-1 text-sm">
                <span class="text-gray-600">周一至周五</span>
                <span class="text-gray-500">19:00 - 22:00</span>
              </div>
              <div class="w-full bg-gray-100 rounded-full h-2">
                <div class="bg-primary h-2 rounded-full" style="width: 75%"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between mb-1 text-sm">
                <span class="text-gray-600">周六至周日</span>
                <span class="text-gray-500">10:00 - 17:00</span>
              </div>
              <div class="w-full bg-gray-100 rounded-full h-2">
                <div class="bg-primary h-2 rounded-full" style="width: 90%"></div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 热门话题 -->
        <div class="bg-white rounded-xl shadow-sm p-5 mb-6">
          <h3 class="font-semibold text-gray-900 mb-4">我关注的话题</h3>
          <div class="space-y-3">
            <div class="flex items-center justify-between">
              <a href="#" class="text-sm text-gray-700 hover:text-primary transition-colors">
                #前端开发
              </a>
              <span class="text-xs text-gray-500">128个帖子</span>
            </div>
            <div class="flex items-center justify-between">
              <a href="#" class="text-sm text-gray-700 hover:text-primary transition-colors">
                #React
              </a>
              <span class="text-xs text-gray-500">96个帖子</span>
            </div>
            <div class="flex items-center justify-between">
              <a href="#" class="text-sm text-gray-700 hover:text-primary transition-colors">
                #JavaScript
              </a>
              <span class="text-xs text-gray-500">156个帖子</span>
            </div>
            <div class="flex items-center justify-between">
              <a href="#" class="text-sm text-gray-700 hover:text-primary transition-colors">
                #性能优化
              </a>
              <span class="text-xs text-gray-500">78个帖子</span>
            </div>
          </div>
          <button class="w-full mt-4 py-2 text-sm text-primary hover:bg-primary/5 rounded-lg transition-colors">
            查看全部
          </button>
        </div>
      </aside>
    </div>
  </main>

  <!-- 移动端底部导航栏 -->
  <nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 md:hidden z-30">
    <div class="flex items-center justify-around h-16">
      <a href="index.html" class="flex flex-col items-center justify-center text-gray-500">
        <i class="fa fa-home text-xl"></i>
        <span class="text-xs mt-1">首页</span>
      </a>
      <a href="#" class="flex flex-col items-center justify-center text-gray-500">
        <i class="fa fa-compass text-xl"></i>
        <span class="text-xs mt-1">发现</span>
      </a>
      <a href="new-post.html" class="flex flex-col items-center justify-center">
        <div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center -mt-4 shadow-lg">
          <i class="fa fa-plus text-white text-xl"></i>
        </div>
      </a>
      <a href="favorites.html" class="flex flex-col items-center justify-center text-gray-500">
        <i class="fa fa-star-o text-xl"></i>
        <span class="text-xs mt-1">收藏</span>
      </a>
      <a href="profile.html" class="flex flex-col items-center justify-center text-primary">
        <i class="fa fa-user-o text-xl"></i>
        <span class="text-xs mt-1">我的</span>
      </a>
    </div>
  </nav>

  <!-- 移动端悬浮发布按钮 (在特定条件下显示) -->
  <div class="fixed bottom-20 right-4 md:hidden z-20 hidden" id="floating-new-post">
    <a href="new-post.html" class="w-14 h-14 bg-primary rounded-full flex items-center justify-center shadow-lg">
      <i class="fa fa-pencil text-white text-xl"></i>
    </a>
  </div>

  <!-- JavaScript -->
  <script>
    // 监听滚动显示/隐藏底部导航栏
    let lastScrollTop = 0;
    const mobileNav = document.querySelector('nav.fixed.bottom-0');
    const floatingButton = document.getElementById('floating-new-post');
    
    if (mobileNav) {
      window.addEventListener('scroll', () => {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        
        if (scrollTop > lastScrollTop && scrollTop > 300) {
          // 向下滚动且超过300px
          mobileNav.classList.add('translate-y-full');
          if (floatingButton) {
            floatingButton.classList.remove('hidden');
          }
        } else {
          // 向上滚动或未超过300px
          mobileNav.classList.remove('translate-y-full');
          if (floatingButton) {
            floatingButton.classList.add('hidden');
          }
        }
        
        lastScrollTop = scrollTop;
      });
    }
    
    // 内容选项卡切换
    const tabs = document.querySelectorAll('.bg-white.rounded-xl.shadow-sm.overflow-hidden.mb-6 button');
    tabs.forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有选项卡的激活状态
        tabs.forEach(t => {
          t.classList.remove('text-primary', 'border-b-2', 'border-primary');
          t.classList.add('text-gray-500');
        });
        
        // 激活当前选项卡
        this.classList.remove('text-gray-500');
        this.classList.add('text-primary', 'border-b-2', 'border-primary');
        
        // 这里可以添加切换内容的逻辑
      });
    });
  </script>
</body>
</html>